<template>
	<view>
		<!-- <free-nav-bar title="游客端"></free-nav-bar> -->

		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px)" :show-scrollbar="false">
			<view class="fixed-title text-center pt-2 pb-2 font-14 text-white">上游服务端</view>
			<view class="bg-linear-gradient" style="margin-top: 39px">
				<view class="p-2">
					<u-swiper height="300" :list="list"></u-swiper>
				</view>
			</view>
			<u-notice-bar style="border: 1px solid #8ed0f2; margin: 10px" color="#8ED0F2" bg-color="#fff"
				border-radius="10" :more-icon="true" class="pl-2 pr-2" mode="vertical" :is-circular="false"
				:list="lists" @click="gitMin('/pages/tabbar/index/NewList')"></u-notice-bar>

			<view class="dfex pl-2 pr-2 mt-6 pb-4">
				<view style="text-align: center" v-for="(item, index) in CatList" :key="index" @click="open(item.url)">
					<i v-if="item.icon" class="text-white bg-FFC251 p-2 font rounded-circle iconfont"
						v-html="item.icon"></i>
					<view class="mt-4 font-14" style="lineHights">{{ item.name }}</view>
				</view>
			</view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
			<!-- 涉农申报列表 -->
			<view class="p-2">
				<view class="dfex">
					<view class="dfes">
						<text class="iconfont icon-a-huaban1fuben4 font-24 text-FFC251"></text>
						<text class="pl-1 font-16 text-101010 font_family">涉农主体列表</text>
					</view>
					<view @click="gitMin('/pages/tabbar/index/Agriculture')">
						<text class="font-14 text-999999">查看全部</text>
						<text class="iconfont icon-youyou- text-999999 font-16"></text>
					</view>
				</view>

				<view class="mt-5">
					<view class="dfex u-line pb-2 mb-2" v-for="(item, index) in agricultureList" :key="index">
						<view @click="gitMin('/pages/tabbar/index/AgricultureDetails?id='+item.id)">
							<view class="text-333333 font-14">{{ item.enterpriseName }}</view>
							<view class="dfes mt-2">
								<view v-for="labelItem in item.agricultureLabelList" :key="labelItem"
									class="mr-2 bg-FCE07F text-FFC251 pl-1 pr-1 rounded">{{ labelItem }}</view>
							</view>
						</view>
						<view @click="click()" v-if="item.annt === '已通过，去查看'"
							class="bg-78AB06 pl-2 pr-2 py-1 rounded-circle font-12 text-white">{{ item.annt }}</view>
						<view v-if="item.annt === '查看申请审核中'"
							class="bg-CECECE pl-2 pr-2 py-1 rounded-circle font-12 text-white">{{ item.annt }}</view>
						<view v-if="item.annt === '申请查看主体信息'"
							class="bg-FFC251 pl-2 pr-2 py-1 rounded-circle font-12 text-white">{{ item.annt }}</view>
					</view>
				</view>
			</view>

			<!-- 政策资讯 -->
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
			<view class="p-2">
				<view class="dfex">
					<view class="dfes">
						<text class="iconfont icon-a-huaban1fuben4 font-24 text-FFC251"></text>
						<text class="pl-1 font-16 text-101010 font_family">政策资讯</text>
					</view>
					<view @click="gitMin('/pages/tabbar/index/policy')">
						<text class="font-14 text-999999">查看全部</text>
						<text class="iconfont icon-youyou- text-999999 font-16"></text>
					</view>
				</view>

				<view class="mt-5">
					<view class="dfex u-line pb-2 mb-2" v-for="(item, index) in newList" :key="index">
						<view @click="gitMin('/pages/tabbar/index/policyDetails?id=' + item.id)">
							<text class="text-333333 font-14">{{ item.title }}</text>
							<view class="mt-2 lineHights font-12 text-999999">
								<view>{{ item.source }}</view>
								<view>{{ item.createTime }}</view>
							</view>
						</view>
						<image style="width: 143px; height: 90px" :src="getFullImageUrl(item.Image)" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 列表  -->
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
			<view class="p-2">
				<!-- Tab bar -->
				<view class="dfex">
					<view class="tab-item pb-1" v-for="(tab, index) in tabs" :key="index" @click="currentTab = index"
						:class="{ active: currentTab === index }">
						{{ tab }}
					</view>
				</view>

				<!-- Tab content -->
				<view style="text-align: right" class="mt-2" v-if="tabs[currentTab] === '品牌积分榜'">
					<text class="font-14 text-999999" @click="gitMin('/pages/tabbar/index/pointsTable')">查看全部</text>
					<text class="iconfont icon-youyou- text-999999 font-16"></text>
				</view>
				<view style="text-align: right" class="mt-2" v-if="tabs[currentTab] === '黑名单'">
					<text class="font-14 text-999999" @click="gitMin('/pages/tabbar/index/blacklist')">查看全部</text>
					<text class="iconfont icon-youyou- text-999999 font-16"></text>
				</view>
				<view style="text-align: right" class="mt-2" v-if="tabs[currentTab] === '品牌执法'">
					<text class="font-14 text-999999"
						@click="gitMin('/pages/tabbar/index/brandEnforcement')">查看全部</text>
					<text class="iconfont icon-youyou- text-999999 font-16"></text>
				</view>
				<view class="mt-3">
					<view v-for="(item, itemIndex) in currentTabContent" :key="itemIndex">
						<!-- 标签页内容 -->
						<view class="dfex mt-3">
							<template v-if="tabs[currentTab] === '品牌积分榜'">
								<view class="dfes">
									<!-- Customization for '品牌积分榜' tab -->
									<view :class="[
                      'pr-2 font-20',
                      {
                        'index-color-1': itemIndex % 3 === 0 && itemIndex < 3,
                        'index-color-2': itemIndex % 3 === 1 && itemIndex < 3,
                        'index-color-3': itemIndex % 3 === 2 && itemIndex < 3,
                        'font-color-gray': itemIndex >= 3,
                      },
                    ]">
										{{ itemIndex + 1 }}
									</view>
									<image style="width: 35px; height: 35px; border-radius: 100%"
										:src="getFullImageUrl(item.Image)">
									</image>
									<text class="ml-2 font-14 text-333333">{{ item.enterpriseName }}</text>
								</view>
								<text class="text-78AB06 font-16">{{ item.totalIntegral }} 积分</text>
							</template>
						</view>
						<!-- 黑名单, 品牌执法 -->
						<template v-if="
                tabs[currentTab] === '黑名单' || tabs[currentTab] === '品牌执法'
              ">
							<view class="u-line pb-2">
								<view class="dfex">
									<view>{{ item.title }}</view>
									<view>{{ item.time }}</view>
								</view>
								<view class="mt-2 text-999999 font-12">{{ item.content }}</view>
							</view>
						</template>
					</view>
				</view>
			</view>

			<free-confirm ref="confirm" title="提交申请">
				<u-form :model="form">
					<u-form-item label-width="140" label="原因" prop="name">
						<u-input class="mr-3" v-model="form.name" input-align="right" />
					</u-form-item>
				</u-form>
			</free-confirm>
		</scroll-view>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue";
	import freeConfirm from "@/components/free-ui/free-confirm.vue";
	import $H from "@/common/free-lib/request.js";
	import config from "@/common/free-lib/config.js";

	export default {
		components: {
			freeNavBar,
			freeConfirm,
		},
		data() {
			return {
				form: {
					name: "",
					intro: "",
				},
				confirmType: "",
				confirmText: "",
				list: [
					"https://cdn.uviewui.com/uview/swiper/swiper1.png",
					"https://cdn.uviewui.com/uview/swiper/swiper2.png",
					"https://cdn.uviewui.com/uview/swiper/swiper3.png",
				],
				lists: [],
				CatList: [{
						icon: "&#xe60b;",
						name: "品牌码查询",
						url: "/pages/tabbar/index/query",
						tabIndex: 0,
					},
					{
						icon: "&#xe60c;",
						name: "品牌执法",
						url: "/pages/tabbar/index/brandEnforcement",
						tabIndex: 1,
					},
					{
						icon: "&#xe61b;",
						name: "我的产品",
						url: "/pages/tabbar/market/index",
					},
					{
						icon: "&#xe608;",
						name: "我的服务码",
						url: "/pages/tabbar/user/BrandCode",
					},
				],

				agricultureList: [{
						title: "涉农申报业务标题",
						name: "报名中",
						kaisTiem: "2024.01.13 10:43:50",
						jshuTiem: "2024.01.14 10:43:50",
						annt: "已通过，去查看",
					},
					{
						title: "涉农申报业务标题1",
						name: "已结束",
						kaisTiem: "2024.01.13 10:43:50",
						jshuTiem: "2024.01.14 10:43:50",
						annt: "查看申请审核中",
					},
					{
						title: "涉农申报业务标题1",
						name: "已结束",
						kaisTiem: "2024.01.13 10:43:50",
						jshuTiem: "2024.01.14 10:43:50",
						annt: "申请查看主体信息",
					},
				],
				newList: [],
				tabs: ["品牌积分榜", "黑名单", "品牌执法"],
				currentTab: 0,
				tabContents: [
					[],
					[],
					[],
				],
			};
		},
		onLoad() {
			this.getNoticeList();
			this.getPolicyReleaseList();
			this.getBlacklistList();
			this.getAgricultureIntegralList();
			this.getBrandEnforcementList();
			this.getAgricultureList();
		},
		methods: {
			currentTabContent() {
				return this.tabContents[this.currentTab];
			},
			getFullImageUrl(url) {
				return $H.getFullImageUrl(url);
			},
			open(url) {
				// 判断url是否属于选项卡页面，如果包含 '/pages/tabbar/' 则认为是选项卡页面
				if (url.includes("/pages/tabbar/market/")) {
					uni.switchTab({
						url,
					});
				} else {
					uni.navigateTo({
						url,
					});
				}
			},

			gitMin(url) {
				uni.navigateTo({
					url,
				});
			},
			click() {
				this.$refs.confirm.show((close) => {
					if (this.confirmText === "") {
						uni.showToast({
							title: "不能为空",
							icon: "none",
						});
						return;
					}

					this.user[key] = this.confirmText;
					uni.showToast({
						title: "修改成功",
						icon: "none",
					});
					close();
				});
			},

			getNoticeList() {
				$H.get(
						"/basisInform/platformNotice/upper/list", {
							pageNo: 1,
							pageSize: 5,
						}, {}
					)
					.then((res) => {
						if (res.result.records.length == 0) {
							return;
						}
						const noticeList = [];
						for (let i = 0; i < res.result.records.length; i++) {
							if (res.result.records[i].title) {
								noticeList.push(res.result.records[i].title);
							}
						}
						this.lists = noticeList;
					})
					.catch((error) => {
						console.error("请求出错", error); // 处理任何错误
					});
			},
			getPolicyReleaseList() {
				$H.get(
						"/basisInform/policyRelease/upper/list", {
							pageNo: 1,
							pageSize: 5,
						}, {}
					)
					.then((res) => {
						if (res.result.records.length == 0) {
							return;
						}
						let resList = [];
						for (let i = 0; i < res.result.records.length; i++) {
							const item = res.result.records[i];
							resList.push({
								title: item.title,
								source: item.source,
								createTime: item.createTime,
								Image: item.cover,
								id: item.id,
							});
						}
						this.newList = resList;
					})
					.catch((error) => {
						console.error("请求出错", error); // 处理任何错误
					});
			},
			getAgricultureIntegralList() {
				$H.get(
						"/basisInform/integral/queryAgricultureIntegralList", {
							pageNo: 1,
							pageSize: 5,
						}, {}
					)
					.then((res) => {
						if (res.result.records.length == 0) {
							return;
						}
						this.tabContents[0] = res.result.records;
					})
					.catch((error) => {
						console.error("请求出错", error); // 处理任何错误
					});
			},
			getBlacklistList() {
				$H.get(
						"/agriculture/blacklist/upper/list", {
							pageNo: 1,
							pageSize: 5,
						}, {}
					)
					.then((res) => {
						if (res.result.records.length == 0) {
							return;
						}
						let resList = [];
						for (let i = 0; i < res.result.records.length; i++) {
							const item = res.result.records[i];
							resList.push({
								title: item.enterpriseName,
								content: item.enterprisesReason,
								time: item.updateTime,
							});
						}
						this.tabContents[1] = resList;
					})
					.catch((error) => {
						console.error("请求出错", error); // 处理任何错误
					});
			},
			getAgricultureList() {
				$H.get(
						"/brand/user/upper/agricultureList", {
							pageNo: 1,
							pageSize: 5,
						}, {}
					)
					.then((res) => {
						if (res.result.records.length == 0) {
							return;
						}

						this.agricultureList = res.result.records;
						if (this.agricultureList.length > 0) {
							this.agricultureList.forEach((item) => {
								if (item.agricultureLabel) {
									item.agricultureLabelList = item.agricultureLabel.split(",");
								}
							})
						}
					})
					.catch((error) => {
						console.error("请求出错", error); // 处理任何错误
					});
			},
			getBrandEnforcementList() {
				$H.get(
						"/agriculture/brandEnforcement/upper/list", {
							pageNo: 1,
							pageSize: 5,
						}, {}
					)
					.then((res) => {
						if (res.result.records.length == 0) {
							return;
						}
						let resList = [];
						for (let i = 0; i < res.result.records.length; i++) {
							const item = res.result.records[i];
							resList.push({
								title: item.enterpriseName,
								content: item.enforcementInstructions,
								time: item.createTime,
							});
						}
						this.tabContents[2] = resList;
					})
					.catch((error) => {
						console.error("请求出错", error); // 处理任何错误
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.tab-item {
		font-size: 16px;
		cursor: pointer;
		position: relative;
	}

	.tab-item.active {
		font-size: 16px;
		color: #ffc251;
	}

	.tab-item.active::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
		background-color: #ffc251;
	}

	.index-color-1 {
		font-size: 22px;
		color: #ff0000;
	}

	.index-color-2 {
		font-size: 22px;
		color: #17a2b8;
	}

	.index-color-3 {
		font-size: 22px;
		color: #ffc251;
	}
</style>